<!-- 居民新装 -->
<template>
  <view v-if="stepNmuber == 1">
    <view class="newclothes-dom-resident">
      <view style="background: #fff;  padding: 20px 10px 10px; border-radius: 4px;" class="pb140">
        <uni-forms ref="formref" :model="paramForm" :rules="formrules" labelWidth="80px" label-position="top">
          <uni-section title="身份证信息" type="line"></uni-section>
          <uni-forms-item label="身份证正面" name="sfzzmfileId" required>
            <view class="uni-center border" style="background-color: #fff; font-size:0;" @click="getCardFile">
              <image v-if="paramForm.sfzzm && paramForm.sfzzm.fileId" class="image" mode="widthFix" :src="filePreviewUrl + '?fileId=' + paramForm.sfzzm.fileId" />
              <image v-else class="image" src="@/static/img/idcard.png" mode="widthFix" />
            </view>
          </uni-forms-item>
          <uni-forms-item label="身份证反面" name="sfzfmfileId" required>
            <view class="uni-center border" style="background:#fff; font-size:0;" @click="getBackCardFile">
              <image v-if="paramForm.sfzfm && paramForm.sfzfm.fileId" class="image" mode="widthFix" :src="filePreviewUrl + '?fileId=' + paramForm.sfzfm.fileId" />
              <image v-else class="image" src="@/static/img/idcard1.png" mode="widthFix" />
            </view>
          </uni-forms-item>
          <uni-section title="基本信息" type="line"></uni-section>
          <uni-forms-item label="身份证号" name="zjbh" required>
            <uni-easyinput v-model="paramForm.zjbh" placeholder="点击右侧相机图标" disabled suffix-icon="camera" @iconClick="getCardFile" />
          </uni-forms-item>
          <uni-forms-item label="用户名称" name="yhmc" required>
            <uni-easyinput v-model="paramForm.yhmc" placeholder="点击右侧相机图标" disabled suffix-icon="camera" @iconClick="getCardFile" />
          </uni-forms-item>
          <uni-forms-item label="联系人" name="lxr" required>
            <uni-easyinput v-model="paramForm.lxr" placeholder="联系人" />
          </uni-forms-item>
          <uni-forms-item label="联系电话" name="lxsj" required>
            <uni-easyinput v-model="paramForm.lxsj" placeholder="联系电话" />
          </uni-forms-item>
          <uni-forms-item label="安装地址" name="yhdz" required>
            <uni-easyinput v-model="paramForm.yhdz" placeholder="安装地址" suffix-icon="location" @iconClick="getLocation" />
          </uni-forms-item>
          <uni-section title="物权证信息" type="line"></uni-section>
          <uni-forms-item label="物权证首页" name="wqzfileId" required>
            <view class="uni-center border" style="background-color: #fff; font-size:0;" @click="getWqzFile">
              <image v-if="paramForm.wqz && paramForm.wqz.fileId" class="image" mode="widthFix" :src="filePreviewUrl + '?fileId=' + paramForm.wqz.fileId" />
              <image v-else class="image" src="@/static/img/idcard2.png" mode="widthFix" />
            </view>
          </uni-forms-item>
        </uni-forms>
      </view>
    </view>
    <view class="button-submit">
      <button type="primary" @click="doNext" style="margin-left: 10px;margin-right:10px;">提 交</button>
    </view>
  </view>
  <view v-if="stepNmuber == 2">
    <agreement @agreementConfirm="stepNmuber = 3" @agreementCancel="stepNmuber = 1" />
  </view>
  <view v-if="stepNmuber == 3">
    <business-signature @signatureConfirm="signatureConfirm" @signatureCancel="stepNmuber = 1" />
  </view>

</template>

<script lang="ts" setup>
  import agreement from "./agreement.vue";
  import businessSignature from "@/pages/bspsd/components/business-signature.vue";

  import { getPhone } from "@/utils/storage";
  import { filePreviewUrl } from "@/api/url";
  import { SysFiles } from "@/api/tables/SysFiles";
  import { IDCardOCR } from "@/api/request/IDCardOCR";
  import { HlwJuMinXinZhuang } from "@/api/request/ykgl";
  import { ChooseUploadFile } from "@/api/request/ChooseUploadFile";
  import { ref } from "vue"
  const paramForm = ref({
    lxsj: '',
    yhmc: '',
    lxr: '',
    zjbh: '',
    yhdz: '',
    sfzzm: {} as SysFiles,
    sfzzmfileId: '',
    sfzfm: {} as SysFiles,
    sfzfmfileId: '',
    wqz: {} as SysFiles,
    wqzfileId: '',
    dzqm: {} as SysFiles
  })
  const formrules = {
    yhmc: { rules: [{ required: true, errorMessage: '用户名称不能为空' }] },
    zjbh: { rules: [{ required: true, errorMessage: '身份证号不能为空' }] },
    lxr: { rules: [{ required: true, errorMessage: '请输入联系人' }] },
    lxsj: {
      rules: [
        { required: true, errorMessage: '请输入联系电话' },
        { pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, errorMessage: '手机号码格式错误！' },
      ]
    },
    yhdz: { rules: [{ required: true, errorMessage: '请输入安装地址' }] },
    sfzzmfileId: { rules: [{ required: true, errorMessage: '请上传身份证正面' }] },
    sfzfmfileId: { rules: [{ required: true, errorMessage: '请上传身份证反面' }] },
    wqzfileId: { rules: [{ required: true, errorMessage: '请上传物权证' }] }
  }
  const formref = ref(null)
  const stepNmuber = ref(1)

  // 安装地址 打开地图
  const getLocation = function () {
    uni.showLoading({
      title: '加载中',
      mask: true
    });
    uni.getLocation({
      type: 'gcj02',
      geocode: true,
      isHighAccuracy: true,
      success: function (resdata) {
        uni.hideLoading()
        uni.chooseLocation({
          longitude: resdata.longitude,
          latitude: resdata.latitude,
          keyword: resdata.address.poiName,
          success: (res) => {
            paramForm.value.yhdz = res.address
          },
        });
      },
      fail: function () {
        uni.hideLoading()
        uni.chooseLocation({
          success: (res) => {
            paramForm.value.yhdz = res.address
          },
        });
      }
    });
  }
  const doNext = function () {
    // 数据校验
    formref.value.validate().then(res => {
      uni.showModal({
        title: "是否确定提交?",
        cancelText: "取消",
        confirmText: "确定",
        confirmColor: "#F43F3B",
        success: (res) => {
          if (res.confirm) {
            // uni.navigateTo({ url: "./agreement" })
            stepNmuber.value = 2
          }
        }
      })
    }).catch(err => {
      // console.log('表单错误信息：', err);
      uni.showToast({ icon: "none", title: err[0].errorMessage })
    })
  }
  //  上传 身份证 正面
  const getCardFile = function () {
    ChooseUploadFile({
      mask: true,
      success: (result : SysFiles) => {
        uni.showLoading({ mask: true })
        paramForm.value.sfzzm = result
        paramForm.value.sfzzmfileId = result.fileId || ''
        IDCardOCR({
          data: {
            fileId: result.fileId,
          },
          success: (res) => {
            uni.hideLoading()
            paramForm.value.zjbh = res.IdNum
            paramForm.value.yhmc = res.Name
            if (paramForm.value.lxr == undefined || paramForm.value.lxr == "") {
              paramForm.value.lxr = res.Name
            }
            paramForm.value.lxsj = getPhone()
            if (res.IdNum == '' || res.IdNum.length < 18 || res.Name == '') {
              uni.showModal({ content: "身份证照片检测失败 请重新上传", showCancel: false })
            }
          }, fail: () => {
            uni.hideLoading()
            uni.showModal({ content: "身份证照片检测失败", showCancel: false })
          }
        })
      },
    })
  }
  // 上传身份证反面
  const getBackCardFile = function () {
    ChooseUploadFile({
      mask: true,
      success: (result : SysFiles) => {
        paramForm.value.sfzfm = result
        paramForm.value.sfzfmfileId = result.fileId || ''
      },
    })
  }
  // 上传 物权证
  const getWqzFile = function () {
    ChooseUploadFile({
      mask: true,
      success: (result : SysFiles) => {
        paramForm.value.wqz = result
        paramForm.value.wqzfileId = result.fileId || ''
      },
    })
  }
  // 签名完成
  const signatureConfirm = (file) => {
    paramForm.value.dzqm = file
    addClick()
  }
  const addClick = function () {
    HlwJuMinXinZhuang({
      data: {
        jbxx: {
          lxsj: paramForm.value.lxsj,
          yhmc: paramForm.value.yhmc,
          lxr: paramForm.value.lxr,
          zjbh: paramForm.value.zjbh,
          yhdz: paramForm.value.yhdz,
        },
        sfzzm: paramForm.value.sfzzm,
        sfzfm: paramForm.value.sfzfm,
        wqz: paramForm.value.wqz,
        dzqm: paramForm.value.dzqm,
      },
      success: (result) => {
        uni.showModal({
          title: "提示",
          content: "你的业务已提交成功，稍后可以在：我的->业务办理中查询进度！",
          showCancel: false,
          success: () => {
            uni.navigateBack()
          },
        })
      },
      fail: (_code, message) => {
        uni.showModal({
          title: "错误提示",
          content: "提交失败：" + message,
          showCancel: false,
          success: () => {
            uni.navigateBack()
          }
        })
      }
    })
  }
</script>

<style lang="scss" scoped>
  .image {
    min-height: 200px;
  }
</style>